<template>
	<div class="position">
		<span class="iconfont position__icon">&#xe619;</span>
		北京理工大学国防科技园2号楼10层
		<span class="iconfont position__notice">&#xe60b;</span>
	</div>
	<div class="search">
		<span class="iconfont">&#xe62d;</span>
		<span class="search__text">山姆会员商店优惠商品</span>
	</div>
	<div class="banner">
		<img
			class="banner__img"
			src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
			alt="banner__img"
		/>
	</div>
	<div class="icons">
		<div
			class="icons__item"
			v-for="item of bannerList"
			:key="item.text"
		>
			<img
				class="icons__item__img"
				:src="item.imageUrl"
				alt="banner--img"
			/>
			<p class="icons__item__desc">{{item.text}}</p>
		</div>
	</div>
	<div class="gap"></div>
</template>

<script>
	import { defineComponent } from 'vue'

	export default defineComponent({
		name: '	StaticPart',
		setup() {
			const bannerList = [
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/超市.png', text: '超市便利' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/菜市场.png', text: '菜市场' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/水果店.png', text: '水果店' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/鲜花.png', text: '鲜花绿植' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/医药健康.png', text: '医药健康' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/家居.png', text: '家居时尚' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/蛋糕.png', text: '烘培蛋糕' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/签到.png', text: '签到' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/大牌免运.png', text: '大牌免运' },
				{ imageUrl: 'http://www.dell-lee.com/imgs/vue3/红包.png', text: '红包套餐' }
			]
			return {
				bannerList
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../style/variable.scss';
	@import '../../style/mixins.scss';

	.position {
		padding: .16rem .24rem .16rem 0;
		line-height: .22rem;
		font-size: .16rem;
		color: $content-font-color;
		@include ellipsis;
		&__icon {
			position: relative;
			top: .01rem;
			font-size: .2rem;
		}
		&__notice {
			position: absolute;
			right: .2rem;
			top: .17rem;
			height: .2rem;
			font-size: .2rem;
		}
	}
	.search {
		line-height: .32rem;
		background: #f5f5f5;
		color: #b7b7b7;
		border-radius: .16rem;
		font-size: .14rem;
		margin-bottom: .12rem;
		.iconfont {
			display: inline-block;
			padding: 0 .08rem 0 .12rem;
			font-size: .16rem;
		}
		&__text {
			display: inline-block;
			font-size: .14rem
		}
	}
	.banner {
		height: 0;
		overflow: hidden;
		padding-bottom: 25.4%;
		&__img {
			width: 100%;
		}
	}
	.icons {
		display: flex;
		flex-wrap: wrap;
		margin-top: .16rem;
		&__item {
			width: 20%;
			&__img {
				display: block;
				width: .4rem;
				height: .4rem;
				margin: 0 auto;
			}
			&__desc {
				margin: 0.06rem 0 .16rem 0;
				text-align: center;
				color: $content-font-color;
			}
		}
	}
	.gap {
		margin: 0 -.18rem;
		height: .1rem;
		background: $content-background;
	}
</style>
